<script setup>

import {ref, defineEmits, defineProps} from 'vue'

import OneImage from '@/components/common/OneImage.vue'
import InchesInput from '@/components/common/InchesInput.vue'
import StepTitleDescription from '@/components/common/StepTitleDescription.vue'

const stepTitleDescriptionData = ref({
  title: 'Step 3',
  description: 'What\'s your window width? (Frame outer edge to edge.)\n',
})

const emit = defineEmits(['getInches'])

const OneImageData = ref({
  src: "https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_B2.svg?v=1745721036",
  alt: 'Window Width',
})

const getInches = (inches) => {
  emit('submit', inches)
}

</script>

<template>

  <div class="content-container">
    <StepTitleDescription :title-and-description="stepTitleDescriptionData"/>

    <OneImage :OneImage="OneImageData"/>

    <InchesInput @submit="getInches" :minValue="11"/>
  </div>

</template>

<style scoped>

.content-container {
  display:flex;
  flex-direction: column;
  align-items: center;
}

</style>